<template>
  <view class="template-card" @click="onTemplateClick">
    <view class="thumbnail">
      <image src="/static/wj.png" mode="aspectFill"></image>
      <view v-if="template.isVip" class="vip-badge">VIP</view>
    </view>
    <view class="info">
      <view class="title">{{ template.name }}</view>
      <view class="meta">
        <text>工作年限: {{ template.workYears }}</text>
        <text>技能等级: {{ template.level }}</text>
      </view>
    </view>
  </view>
</template>

<script setup>
import { defineProps, defineEmits } from 'vue'

const props = defineProps({
  template: {
    type: Object,
    required: true
  }
})

const emit = defineEmits(['click'])

const onTemplateClick = () => {
  emit('click', props.template)
}
</script>

<style lang="scss" scoped>
.template-card {
  width: 100%;
  background-color: #FFFFFF;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
  margin-bottom: 16px;
  
  .thumbnail {
    width: 100%;
    height: 160px;
    position: relative;
    
    image {
      width: 100%;
      height: 100%;
    }
    
    .vip-badge {
      position: absolute;
      top: 8px;
      right: 8px;
      padding: 2px 6px;
      background-color: #FFD700;
      color: #333;
      font-size: 12px;
      font-weight: bold;
      border-radius: 4px;
    }
  }
  
  .info {
    padding: 12px;
    
    .title {
      font-size: 16px;
      font-weight: 500;
      color: #333;
      margin-bottom: 8px;
    }
    
    .meta {
      display: flex;
      flex-direction: column;
      font-size: 12px;
      color: #666;
      
      text {
        margin-bottom: 4px;
      }
    }
  }
}
</style> 